CSS помогает вам позиционировать ваш HTML-элемент. Вы можете поместить любой элемент HTML в любом месте, которое вам нравится. Вы можете указать, хотите ли вы, чтобы элемент располагался относительно его естественного положения на странице или абсолютный на основе его родительского элемента.
Теперь мы увидим все связанные с CSS позиционирующие свойства с примерами -
Относительное позиционирование
Относительное позиционирование изменяет положение элемента HTML относительно того, где он обычно появляется. Таким образом, «left: 20»
добавляет 20 пикселей в положение LEFT
элемента.
Вы можете использовать два значения top
и left
вместе со свойством position
для перемещения элемента HTML в любом месте документа HTML.
- Переместить влево - используйте отрицательное значение для
left
. - Переместить вправо - используйте положительное значение для
left
. - Переместить вверх - используйте отрицательное значение для
top
. - Переместить вниз - используйте положительное значение для
top
.
ПРИМЕЧАНИЕ. Вы можете использовать bottom
или right
значения так же, как top
и left
.
Вот пример -
Это приведет к следующему результату -